<template>
  <div class="historypage tapStyle secondary-page-mode">
     <div class="secondary-toolbar">
          <span>时间选择 : </span>&nbsp;
          <div class="layoutBox" style="width:242px">
            <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>&emsp;&emsp;
          <span>停站原因 : </span>&nbsp;
          <div class="layoutBox" style="width:120px">
            <el-select v-model="value" placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;&emsp;
          
          <el-button><i class="iconfont icon-sousuo"></i>查询</el-button>
          <el-button><i class="iconfont icon-sousuo"></i>停站</el-button>
          <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
     </div>
     <div class="currency-mode-wrap">
          <yf-tabs type="border-card">
            <yf-tab-pane label="当前断面">
                    <div class="tablebox">
                        <el-table
                          :data="tableData"
                          border
                          height="calc(100% - 37px)"
                         >
                          <el-table-column
                            type="index"
                            label="序号"
                            :index="indexMethod"
                            width="50">
                          </el-table-column>
                          <el-table-column
                            prop="name"
                            label="断面名称">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            label="开始时间">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            label="结束时间">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            label="停站原因">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            label="是否生效">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            label="操作人">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            label="备注">
                          </el-table-column>
                           <el-table-column
                            prop="name"
                            label="操作">
                            <template>
                              <div>
                                  <el-button type="secondBtn">审核</el-button>
                              </div>
                            </template>
                          </el-table-column>
                        </el-table>
                        <div class="table-pagination-wrap">
                          <el-pagination
                            @size-change="paginationSizeChange"
                            @current-change="paginationChange"
                            :current-page.sync="currentPage"
                            :page-size="pageSize"
                            popper-class="select-pagination-option"
                            background
                            :small="true"
                            :page-sizes="pageList"
                            layout="total, sizes, slot,->,prev, pager, next, jumper"
                            :total="total">
                            <template v-slot:default>
                              <span class="el-pagination__current">当前第{{ currentPage }}/{{totalPageNumber}}页</span>
                            </template>
                          </el-pagination>
                        </div>
                    </div>
            </yf-tab-pane>
            <yf-tab-pane label="所有断面">

              数据图表
            </yf-tab-pane>
          </yf-tabs>
     </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dateRange: "",
      value: "",
      optionData: [
        { value: 1, label: "水温", standard: "", isShow: true },
        { value: 2, label: "pH", standard: "6~9", isShow: true },
        { value: 3, label: "溶解氧", standard: "≥5", isShow: true },
        { value: 4, label: "电导率", standard: "", isShow: true },
        { value: 5, label: "浊度", standard: "", isShow: true },
        { value: 6, label: "高锰酸盐", standard: "6", isShow: true },
        { value: 7, label: "氨氮", standard: "1", isShow: true },
        { value: 8, label: "总磷", standard: "0.2", isShow: true },
        { value: 9, label: "总氮", standard: "", isShow: true }
      ],
      selectCheck: [], //选中的监测项目
      tableData: [{}],
      currentPage: 1, //分页组件当前页
      total: 200, //分页总条数
      pageSize: 10, //分页每页多少条数据
      pageList: [10, 15, 20] //设置每页多少条
    };
  },
  created() {
    this.$store.commit("setShowlefttree", false);
  },
  methods: {
    selectChange(arr) {
      this.selectCheck = arr;
    },
    indexMethod(index) {
      return index + 1;
    },
    paginationSizeChange() {},
    paginationChange() {}
  },
  computed: {
    stationInfo: {
      get: function() {
        return this.$store.state.stationInfo;
      }
    },
    totalPageNumber() {
      //计算总页数
      let number = 0;
      number = Math.ceil(this.total / this.pageSize);
      return number;
    }
  },
  watch: {
    stationInfo: function(newValue, oldValue) {
      // if(newValue[0].label != oldValue[0].label){
      //    console.log(newValue[0].label)
      // }
      console.log(newValue[0].label);
    }
  }
};
</script>

<style scoped lang="less">
.historypage {
  height: 100%;
}
</style>
